<template>
	<view class="body">
		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">头像</view>
			<view class="right d-flex ai-center" @tap="changeUserAvatar">
				<image :src="user.avatar" mode="aspectFill"></image>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">背景</view>
			<view class="right d-flex ai-center" @tap="changeUserWall">
				<image class="wall" :src="userDesc.wall" mode="aspectFill"></image>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">昵称</view>
			<view class="right d-flex ai-center" @tap="prompt('nickname', '昵称')">
				<view class="item">{{user.nickname}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">签名</view>
			<view class="right d-flex ai-center" @tap="prompt('sign', '签名')">
				<view class="item">{{userDesc.sign}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">性别</view>
			<view class="right d-flex ai-center" @tap="electionSex">
				<view class="item">{{userDesc.sex === 1 ? "男" : "女"}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">生日</view>
			<picker mode="date" :value="userDesc.birthday" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="right d-flex ai-center">
					<view class="item">{{userDesc.birthday}}</view>
					<view class="iconfont icon-bianji1"></view>
				</view>
			</picker>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">情感</view>
			<view class="right d-flex ai-center" @tap="prompt('emotion', '情感')">
				<view class="item">{{userDesc.emotion}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">职业</view>
			<view class="right d-flex ai-center" @tap="prompt('vocation', '职业')">
				<view class="item">{{userDesc.vocation}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">家乡</view>
			<view class="right d-flex ai-center" @tap="showMulLinkageThreePicker">
				<view class="item">{{userDesc.hometown}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>

		<view class="userinfo-edit-list d-flex jc-between ai-center">
			<view class="title">爱好</view>
			<view class="right d-flex ai-center" @tap="prompt('hobby', '爱好')">
				<view class="item">{{userDesc.hobby}}</view>
				<view class="iconfont icon-bianji1"></view>
			</view>
		</view>
		<profile-prompt ref="prompt" @confirm="confirm" @cancel="cancel" :title="promptTitle"></profile-prompt>

		<button class="confirm main-button" hover-class="button-hover" @tap="submit">确认修改</button>
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" />

	</view>
</template>

<script>
	import profilePrompt from "components/profile/profile-prompt.vue"
	import mpvueCityPicker from "components/official/mpvue-citypicker/mpvueCityPicker.vue"
	import * as userApi from "network/user.js"
	import * as Types from "store/constants/index.js"
	import {
		birthFormat
	} from "common/tools/time.js"
	import {
		uploadFile
	} from "common/tools/upload.js"

	export default {
		data() {
			return {
				user: {},
				userDesc: {},
				promptTitle: "修改资料",
				cityPickerValueDefault: [0, 0, 1]
			};
		},
		methods: {
			// 修改头像
			changeUserAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: async res => {
						await uploadFile("avatar", res.tempFilePaths[0], this.user.token)
						this.user.avatar = res.tempFilePaths[0]
						uni.showToast({
							title: "头像修改成功~",
							icon: "success"
						})
					}
				})
			},
			// 修改壁纸
			changeUserWall() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: async res => {
						await uploadFile("wall", res.tempFilePaths[0], this.user.token)
						this.userDesc.wall = res.tempFilePaths[0]
						uni.showToast({
							title: "壁纸修改成功~",
							icon: "success"
						})
					}
				})
			},
			// 单列选择
			electionSex() {
				let arr = ["女", "男"]
				uni.showActionSheet({
					itemList: arr,
					success: res => {
						this.userDesc.sex = res.tapIndex
					}
				});
			},
			// 提交
			async submit() {
				const res1 = await userApi.updateNickname(this.user.nickname)
				const res2 = await userApi.updateUserDesc(this.userDesc)
				if (res1.meta.code === 200 && res2.meta.code === 200) {
					uni.showToast({
						title: "修改成功~",
						icon: "none"
					})
					uni.navigateBack()
				}
			},
			// 弹出框
			prompt(type, title) {
				this.$refs.prompt.type = type
				if (type === "nickname") {
					this.$refs.prompt.text = this.user.nickname
				} else {
					this.$refs.prompt.text = this.userDesc[type]
				}
				this.promptTitle = title
				this.$refs.prompt.show();
			},
			// 确认
			confirm(obj) {
				if (obj.type === "nickname") {
					this.user.nickname = obj.text
				} else {
					this.userDesc[obj.type] = obj.text
				}
				this.$refs.prompt.hide();
			},
			// 返回
			cancel() {
				this.$refs.prompt.hide();
			},
			// 获取时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 1000;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 修改生日
			bindDateChange(e) {
				this.userDesc.birthday = e.target.value
			},
			// 三级联动
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 确认
			onConfirm(e) {
				this.userDesc.hometown = e.label
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		components: {
			profilePrompt,
			mpvueCityPicker
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
				return true
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		onLoad() {
			console.log(this.$store.state)
			this.user = this.$store.state.user
			this.userDesc = this.$store.state.userDesc
			this.userDesc.birthday = birthFormat(this.userDesc.birthday, "YYYY-MM-DD")
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 0 30upx;
		overflow: hidden;

		.userinfo-edit-list {
			padding: 18upx;
			border-bottom: 1upx solid #F4F4F4;

			.title {
				font-size: 32upx;
				font-weight: bolder;
				color: #9B9B9B;
			}

			.right {
				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}

				.wall {
					width: 160upx;
					height: 80upx;
					border-radius: 0;
				}

				.item {
					color: #000000;
				}

				.icon-bianji1 {
					margin-left: 20upx;
					color: #9B9B9B;
					font-size: 40upx;
				}
			}
		}

		.confirm {
			margin-top: 30upx !important;

			&.button-hover {
				background-color: #cab528;
			}
		}
	}
</style>
